<template>
  <view class="doctor-detail">
    <!-- 医生基本信息 -->
    <view class="doctor-header">
      <view class="doctor-avatar">
        <image :src="config.staticUrl + (doctor.imgUrl || '/static/images/default-avatar.png')" mode="aspectFill"></image>
      </view>
      <view class="doctor-info">
        <view class="name-title">
          <text class="name">{{ doctor.name }}</text>
          <text class="title">{{ doctor.jobTitle || '医师' }}</text>
        </view>
        <text class="department">{{ doctor.departmentName || '暂无科室信息' }}</text>
        <text class="hospital">{{ doctor.hospitalName }}</text>
      </view>
    </view>

    <!-- 医生简介 -->
    <view class="section">
      <view class="section-title">医生简介</view>
      <view class="section-content">
        <text>{{ doctor.snapshot || '暂无医生简介' }}</text>
      </view>
    </view>

    <!-- 专业擅长 -->
    <view class="section">
      <view class="section-title">专业擅长</view>
      <view class="section-content">
        <text>{{ doctor.professionalExpertise || '暂无专长介绍' }}</text>
      </view>
    </view>
   
    <!-- 底部操作栏 -->
    <view class="footer">
      <button class="register-btn" @click="handleRegister">立即挂号</button>
    </view>
  </view>
</template>

<script>
import { getInfoDoctor } from '@/api/doctor'
import { getToken } from '@/utils/auth'
import config from '@/config'

export default {
  data() {
    return {
      doctor: {
        id: '',
        name: '',
        jobTitle: '',
        departmentName: '',
        professionalExpertise: '',
        imgUrl: '',
        introduction: '',
        hospitalName: ''
      },
      config: config,
      loading: true
    }
  },
  onLoad(options) {
    this.doctor.id = options.id || ''
    this.loadDoctorDetail()
    
    // 从事件通道获取数据
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('doctorData', (data) => {
      this.doctor = data
    })
  },
  methods: {
    async loadDoctorDetail() {
      if (!this.doctor.id) return
      
      try {
        const res = await getInfoDoctor(this.doctor.id)
        if (res.code === 200) {
          this.doctor = {
            ...this.doctor,
            ...res.data
          }
        } else {
          uni.showToast({
            title: res.msg || '获取医生详情失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取医生详情失败:', error)
        uni.showToast({
          title: '获取医生详情失败',
          icon: 'none'
        })
      }
    },
    
    handleRegister() {
      if (!getToken()) {
        uni.showModal({
          title: '提示',
          content: '请先登录后再挂号',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login'
              })
            }
          }
        });
        return;
      }
      
      // 跳转到挂号页面，传递医生信息
      uni.navigateTo({
        url: `/pages/medical/register?doctorId=${this.doctor.id}&doctorName=${this.doctor.name}&departmentId=${this.doctor.departmentId}&hospitalId=${this.doctor.hospitalId}`
      });
    }}
}
</script>

<style lang="scss">
/* 蓝色医疗主题样式 */
.doctor-detail {
  padding: 0;
  background: linear-gradient(to bottom, #f5f9ff, #ffffff);
  min-height: 100vh;
  font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
}

/* 医生头部信息 - 蓝色医疗卡片 */
.doctor-header {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  position: relative;
  overflow: hidden;
  border-bottom: 1rpx solid #e6f0ff;
}

.doctor-header::before {
  content: "⚕";
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 80rpx;
  color: rgba(30, 144, 255, 0.1);
  z-index: 0;
}

.doctor-avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 30rpx;
  background-color: #f5f9ff;
  border: 3rpx solid #1E90FF;
  position: relative;
  z-index: 1;
}

.doctor-avatar::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2rpx dashed #1E90FF;
  border-radius: 50%;
  top: 0;
  left: 0;
  animation: rotate 20s linear infinite;
  opacity: 0.3;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.doctor-avatar image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doctor-info {
  flex: 1;
  position: relative;
  z-index: 1;
}

.name-title {
  display: flex;
  align-items: baseline;
  margin-bottom: 12rpx;
}

.name {
  font-size: 38rpx;
  font-weight: 600;
  color: #2c3e50;
  margin-right: 20rpx;
  position: relative;
}

.name::after {
  content: "";
  position: absolute;
  bottom: -5rpx;
  left: 0;
  width: 40rpx;
  height: 4rpx;
  background-color: #1E90FF;
}

.title {
  font-size: 26rpx;
  color: #1E90FF;
  background-color: rgba(30, 144, 255, 0.1);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.department {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #7f8c8d;
  margin-top: 8rpx;
}

.department::before {
  content: "🏥";
  margin-right: 8rpx;
  font-size: 32rpx;
}

.hospital {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #7f8c8d;
  margin-top: 8rpx;
}

.hospital::before {
  content: "🏥";
  margin-right: 8rpx;
  font-size: 32rpx;
}

/* 内容区块 - 蓝色医疗卡片 */
.section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 0 20rpx 25rpx;
  box-shadow: 0 4rpx 20rpx rgba(30, 144, 255, 0.08);
  position: relative;
  border-top: 3rpx solid #1E90FF;
}

.section::before {
  content: "";
  position: absolute;
  top: -3rpx;
  left: 30rpx;
  width: 60rpx;
  height: 6rpx;
  background-color: #1E90FF;
  border-radius: 0 0 6rpx 6rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1E90FF;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.section-title::before {
  content: "📌";
  margin-right: 10rpx;
  font-size: 36rpx;
  color: #4682B4;
}

#professional .section-title::before {
  content: "💊";
  color: #4682B4;
}

.section-content {
  font-size: 28rpx;
  color: #34495e;
  line-height: 1.8;
  padding-left: 10rpx;
  border-left: 3rpx solid #e6f0ff;
  padding-left: 20rpx;
}

/* 底部挂号按钮 - 蓝色行动按钮 */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130rpx;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
  backdrop-filter: blur(10rpx);
  border-top: 1rpx solid #e6f0ff;
}

.register-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #1E90FF;
  color: #fff;
  font-size: 34rpx;
  font-weight: 500;
  border-radius: 12rpx;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.register-btn::after {
  content: "🩺";
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size:40rpx;
}

.register-btn:active {
  background-color: #0066CC;
  transform: translateY(2rpx);
}

/* 响应式调整 */
@media (min-width: 768px) {
  .doctor-detail {
    max-width: 750px;
    margin: 0 auto;
  }
}
</style>